<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Procedural - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Environments.html">Environments</a></li><li><a href="module-Procedural.html">Procedural</a><ul class='methods'><li data-type='method'><a href="module-Procedural.html#.focusOnLocation">focusOnLocation</a></li><li data-type='method'><a href="module-Procedural.html#.init">init</a></li><li data-type='method'><a href="module-Procedural.html#.onFeaturesLoaded">onFeaturesLoaded</a></li><li data-type='method'><a href="module-Procedural.html#.onLocationLoaded">onLocationLoaded</a></li><li data-type='method'><a href="module-Procedural.html#.onReady">onReady</a></li><li data-type='method'><a href="module-Procedural.html#.orbitTarget">orbitTarget</a></li><li data-type='method'><a href="module-Procedural.html#.pause">pause</a></li><li data-type='method'><a href="module-Procedural.html#.play">play</a></li><li data-type='method'><a href="module-Procedural.html#.setHD">setHD</a></li><li data-type='method'><a href="module-Procedural.html#.setUserLocation">setUserLocation</a></li><li data-type='method'><a href="module-Procedural.html#.toggleUserLocationTracking">toggleUserLocationTracking</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Procedural</h1>
    

    




<section>

<header>
    
        
            
        
    
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description">The Procedural JavaScript API enables developers to embed
the Procedural engine into their web pages. To use this library
include the library in a script tag on your page like so:
<pre>&lt;script&gt; data-main="js/main" src="js/require.js"&lt;script&gt;</pre>
This will create a <tt>Procedural</tt> object that your JavaScript code
will be able to call. Before you can use the Procedural API, you must wait for
the engine to initialize, after which you can load in a location and add the
visualization to your page. A typical pattern of initialization is as follows:</div>
        

        
            




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>













    <h5>Example</h5>
    
    <pre class="prettyprint"><code>if ( typeof Procedural === 'undefined' ) { Procedural = {}; }

var init = function () {
  Procedural.selectLocation( 'my-location' );
  Procedural.onLocationLoaded = function () {
    var container = document.getElementById( 'app' );
    Procedural.init( container );
  };
};

// When engine is ready initialize
if ( Procedural.ready ) {
  init();
} else {
  Procedural.onReady = init;
}</code></pre>


















        
    
    </div>

    

    

    

     

    

    
        <h3 class="subsection-title">Members</h3>

        
            
<h4 class="name" id=".initialized"><span class="type-signature">(static) </span>initialized<span class="type-signature"> :boolean</span></h4>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Flag showing if the Procedural engine has already been initialized.
Initialization occurs when the Procedural.init() method is invoked
</div>



    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">boolean</span>


        </li>
    </ul>






        
            
<h4 class="name" id=".ready"><span class="type-signature">(static) </span>ready<span class="type-signature"> :boolean</span></h4>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Flag showing if the Procedural engine is ready to be initialized.
</div>



    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">boolean</span>


        </li>
    </ul>





    <h5>Example</h5>
    
    <pre class="prettyprint"><code>if ( Procedural.ready ) {
  init();
} else {
  Procedural.onReady = init;
}</code></pre>



        
    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id=".focusOnLocation"><span class="type-signature">(static) </span>focusOnLocation<span class="signature">(position)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Animates the engine camera to focus on a position
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var place = { latitude: 44.5, longitude: 6.3 };
Procedural.focusOnLocation ( place );

// Optionally can also supply a distance and/or angle
var place = {
  latitude: 44.5, longitude: 6.3,
  distance: 1000, angle: 20
};
Procedural.focusOnLocation ( place );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>position</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">An Object specifying a longitude and latitude</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".init"><span class="type-signature">(static) </span>init<span class="signature">(container)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Appends a canvas element to the specified container where the
engine will draw its output.
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var container = document.getElementById( 'app' );
Procedural.init( container );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>container</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".onFeaturesLoaded"><span class="type-signature">(static) </span>onFeaturesLoaded<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when feature data has been downloaded and displayed
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onFeaturesLoaded = function () {
 console.log( 'Features loaded' );
};</code></pre>


















        
            

    

    <h4 class="name" id=".onLocationLoaded"><span class="type-signature">(static) </span>onLocationLoaded<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when location data has been downloaded and displayed
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onLocationLoaded = function () {
  var container = document.getElementById( 'app' );
  Procedural.init( container );
};</code></pre>


















        
            

    

    <h4 class="name" id=".onReady"><span class="type-signature">(static) </span>onReady<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when engine is ready to recieve API calls
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>if ( Procedural.ready ) {
  init();
} else {
  Procedural.onReady = init;
}</code></pre>


















        
            

    

    <h4 class="name" id=".orbitTarget"><span class="type-signature">(static) </span>orbitTarget<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Animates the engine camera around the current
camera target
</div>

























        
            

    

    <h4 class="name" id=".pause"><span class="type-signature">(static) </span>pause<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Pauses the engine. See also <a href="module-Procedural.html#.play">Procedural.play</a>
</div>

























        
            

    

    <h4 class="name" id=".play"><span class="type-signature">(static) </span>play<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Resumes the engine. See also <a href="module-Procedural.html#.pause">Procedural.pause</a>
</div>

























        
            

    

    <h4 class="name" id=".setHD"><span class="type-signature">(static) </span>setHD<span class="signature">(hd)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Enables or disables HD rendering. On retina displays HD rendering will render at retina
resolution.
</div>











    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>hd</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".setUserLocation"><span class="type-signature">(static) </span>setUserLocation<span class="signature">(position)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Tells the engine where the current user is located, which
displays a marker in the 3D world
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>// Manually construct object, can also use navigator.geolocation.watchPosition
// to obtain
var position = {
  coords: {
    latitude: 46.46695,
    longitude: 7.52151,
    accuracy: 50
  }
};

Procedural.setUserLocation( position );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>position</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">An Object of the format produced by the HTML5 Geolocation API</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".toggleUserLocationTracking"><span class="type-signature">(static) </span>toggleUserLocationTracking<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Toggles whether the camera automatically follows the user
when a new location update is sent using <a href="module-Procedural.html#.setUserLocation">Procedural.setUserLocation</a>. Initially tracking is disabled.
Note tracking is automatically disabled when the user manipulates the camera
</div>

























        
    

    

    
</article>

</section>




</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> using the docdash theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>